<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #toolbar_btns>
        <div class="w-[100%]">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="按周统计" name="week"></el-tab-pane>
            <el-tab-pane label="按月统计" name="month"></el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </VTable>
  </VPage>
</template>
<script setup lang="jsx">
import { purchaseOrderTimelinessRateList } from "@/api/report"
const tableRef = ref()
const activeName = ref("week")
const handleClick = () => {
  tableRef?.value.query()
}
//获取下拉数据
onMounted(() => {})
// 列表配置
const tableOptins = reactive({
  formConfig: { data: {} },
  columns: [
    {
      field: "weekly_number",
      title: "统计周期",
      minWidth: 120,
      slots: {
        default: ({ row }) => <VText value={activeName.value == "week" ? `${row.year}年${row.annual_weeks}周` : row.month} line={1} />,
      },
    },
    { field: "purchaser_username", title: "采购人员", minWidth: 220 },
    { field: "total_count", title: "采购单数量", minWidth: 120 },
    { field: "timeout_count", title: "下单超时数量", minWidth: 120 },
    { field: "timeliness_rate", title: "下单及时率", minWidth: 120 },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        let params = { page: page.pageNum, page_num: page.pageSize, statistical_dimensions: activeName.value }
        return purchaseOrderTimelinessRateList(params)
      },
    },
  },
})
</script>
<style lang="scss" scoped></style>
